<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地理编码</title>
<script src="../js/jquery.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<script src="../js/jquery.autocomplete.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/py.js" type="text/javascript"></script>
<script src="../js/pca.js" type="text/javascript"></script>
<script src="../js/gd_city.js" type="text/javascript"></script>
<script type="text/javascript" src="http://10.1.12.110:8081/webapi/auth.json?t=javascriptmap&v=3.1.1&key=02a51a480f5d59874eb65685bd241fdf9bd8f12ac8306ae139ac98f432932286151dc0ec55580eca"></script>
<style type="text/css">
body {
	background-color: #EEEEEE
}

.main {
	width: 100%;
}

.sp__ {
	margin-top: 3px;
}

.btn-long {
	width: 180px;
	border-radius: 4px;
}

.hl_btn {
	background-color: #ABCDEF;
	color: #fff;
	border-color: #357ebd;
}

.row {
	padding-top: 3px;
	width: 99%
}
</style>
<script type="text/javascript">
	//初始化地图
	var target_code = '023';
	var marker = new Array();
	var windowsArr = new Array();
	function mapInit() {
		mapObj = new MMap.Map("iCenter", {
			scrollWheel : true
		});
	}
	function autoSearch() {
		var keywords = document.getElementById("t_address").value;
		var auto;
		mapObj.plugin([ "MMap.Autocomplete" ], function() {
			var autoOptions = {
				city : "重庆市重庆市渝中区"
			};
			auto = new MMap.Autocomplete(autoOptions);
			//查询成功时返回查询结果
			if (keywords.length > 0) {
				MMap.event.addListener(auto, "complete", autocomplete_CallBack);
				auto.search(keywords);
			}
		});
	}
	function autocomplete_CallBack(data) {
		var resultStr = "";
		var tipArr = [];
		tipArr = data.tips;
		if (tipArr.length > 0) {
			for (var i = 0; i < tipArr.length; i++) {
				resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i
						+ ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\">" + tipArr[i].name
						+ "<span style='color:#C1C1C1;'>" + tipArr[i].district + "</span></div>";
			}
		} else {
			resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
		}

		document.getElementById("result1").innerHTML = resultStr;
		document.getElementById("result1").style.display = "block";
	}
	function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip 
		thiss.style.background = '#CAE1FF';
	}
	function selectResult(index) {
		if (navigator.userAgent.indexOf("MSIE") > 0) {
			document.getElementById("t_address").onpropertychange = null;
			document.getElementById("t_address").onfocus = focus_callback;
		}
		//截取输入提示的关键字部分
		var text =  document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g, "");
		document.getElementById("t_address").value = text;
		
		text = $("#divid" + (index + 1) + " span").text() + text;
		
		document.getElementById("result1").style.display = "none";
		//根据选择的输入提示关键字查询

		var MGeocoder;
		//加载地理编码插件
		mapObj.plugin([ "MMap.Geocoder" ], function() {
			MGeocoder = new MMap.Geocoder({
				city : getCode($("#pr_selector").val(), $("#city_selector").val()), //城市，默认：“全国”
				radius : 1000
			});
			MMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
			MGeocoder.getLocation(text);
		});

	}
	function placeSearch_CallBack(data) {
		//清空地图上的InfoWindow和Marker
		windowsArr = [];
		marker = [];
		mapObj.clearMap();
		var poiArr = data.poiList.pois;
		var resultCount = poiArr.length;
		for (var i = 0; i < resultCount; i++) {
			addmarker(i, poiArr[i]);
		}
		mapObj.setFitView();
	}
	function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复 
		thiss.style.background = "";
	}

	//初始化省份
	function initProvinces() {
		var $pr = $("#pr_selector");
		$pr.empty();
		$pr.append("<option>选择省份</option>");
		//排序并且遍历
		$(sortArr(getProvinces(), function(a, b) {
			return CC2PY(a.name) > CC2PY(b.name);
		}, true)).each(function(i, item) {
			$pr.append("<option>" + item.name + "</option>");
		});
		//选择第一个
		$pr.children()[1].selected = true;
		listCitys();
	}
	//列城市
	function listCitys() {
		var province = $("#pr_selector").val();
		var $city = $("#city_selector");
		$city.empty();
		$city.append("<option>选择城市</option>");
		$(getCitys(province)).each(function(i, item) {
			$city.append("<option>" + item.name + "</option>");
		});
		$city.children()[1].selected = true;
		listAreas();
	}
	//列区县 
	function listAreas() {
		var province = $("#pr_selector").val();
		var city = $("#city_selector").val();
		var $area = $("#area_selector");
		$area.empty();
		$area.append("<option>选择地区</option>");
		$(getAreas(province, city)).each(function(i, item) {
			$area.append("<option>" + item.DisName + "</option>");
		});
		$area.children()[1].selected = true;
		//TODO 加载地图
		loadMap(province, city, $area.val());
	}
	function areaChange() {
		var province = $("#pr_selector").val();
		var city = $("#city_selector").val();
		var $area = $("#area_selector");
		loadMap(province, city, $area.val());
	}
	function loadMap(province, city, area, add) {
		mapObj.clearMap();
		var MGeocoder;
		mapObj.plugin([ "MMap.Geocoder" ], function() {
			MGeocoder = new MMap.Geocoder({
				city : getCode(province, city), //城市，默认：“全国”
				radius : 1000
			});
			MMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
			MGeocoder.getLocation(province + city + area + (add ? add : ""));
		});
	}

	function geocoder_CallBack(r) {
		mapObj.clearMap();
		var geocode = r.geocodes;
		if (geocode.length) {
			addmarker(0, geocode[0]);
		}
		mapObj.setFitView();
	}
	function addmarker(i, d) {
		var lngX = d.location.getLng();
		var latY = d.location.getLat();
		var markerOption = {
			map : mapObj,
			icon : "http://webapi.amap.com/images/" + (i + 1) + ".png",
			position : new MMap.LngLat(lngX, latY)
		};
		var mar = new MMap.Marker(markerOption);
		marker.push(new MMap.LngLat(lngX, latY));

		var infoWindow = new MMap.InfoWindow({
			content : d.formattedAddress,
			autoMove : true,
			size : new MMap.Size(150, 0),
			offset : {
				x : 0,
				y : -30
			}
		});
		windowsArr.push(infoWindow);
		var aa = function(e) {
			infoWindow.open(mapObj, mar.getPosition());
		};
		MMap.event.addListener(mar, "click", aa);
	}
	//开启键盘效果 切换省份 
	function keyboardOn(e) {
		e = (e) ? e : window.event;
		var code = e.keyCode;
		if (code) {
			showProvinceByKey(decode(code));
		}
	}
	function showProvinceByKey(c) {
		if (!c) {
			return;
		}
		var prs = getProvinces(c);
		var infoPanel = $("#pr_selector");
		infoPanel.empty();
		infoPanel.append("<option class='prs_info'>选择省份</option>");
		$(prs).each(function(i, item) {
			infoPanel.append("<option class='prs_info'>" + item.name + "</option>");
		});
		$("#pr_selector").children()[1].selected = true;
		listCitys();
	}
	//键盘按键码解码
	function decode(code) {
		switch (code) {
		case 65:
			return "A";
		case 66:
			return "B";
		case 67:
			return "C";
		case 70:
			return "F";
		case 71:
			return "G";
		case 72:
			return "H";
		case 74:
			return "J";
		case 76:
			return "L";
		case 78:
			return "N";
		case 81:
			return "Q";
		case 83:
			return "S";
		case 84:
			return "T";
		case 88:
			return "X";
		case 89:
			return "Y";
		case 90:
			return "Z";
		default:
			return undefined;
		}
	}
	//关闭键盘效果
	function keyboardOff(e) {
	}
	$(function() {
		mapInit();
		initProvinces();
		$("#t_address").on('propertychange input', autoSearch);
		$("#pr_selector").on('change', listCitys);
		$("#city_selector").on('change', listAreas);
		$("#area_selector").on('change', areaChange);
		
		window.document.onkeydown = keyboardOn;//开启键盘监控
		$("input").on('focus', function() {
			window.document.onkeydown = keyboardOff;//输入框获取焦点关闭键盘监控
		});
		$("input").on('blur', function() {
			window.document.onkeydown = keyboardOn;//输入框失去焦点开启键盘监控
		});
	});
</script>
</head>
<body>
	<div class="main">
		<input type="hidden" id="map_type"> <input type="hidden" id="map_type"> <input type="hidden" id="address_v_flag" value="1">
		<div class="row">
			<div class="col-md-6">
				<select id="pr_selector" class="form-control" style="width: 125px; display: inline-block; margin-left: 10px;">
					<option>选择省份</option>
				</select> <select class="form-control" id="city_selector" style="width: 125px; display: inline-block; margin-left: 10px;">
					<option>选择城市</option>
				</select> <select class="form-control" id="area_selector" style="width: 150px; display: inline-block; margin-left: 10px;">
					<option>选择地区</option>
				</select>
			</div>
			<div class="col-md-6">
				<div class="input-group">
					<input id="t_address" class="form-control" placeholder="地址信息">
					<div id="result1" name="result1" style="overflow: auto; width: 95%; border: 1px solid gray; display: none"></div>
					<span class="input-group-btn">
						<button class="btn  btn-primary" type="button" onclick="getAddress_();">确认地址</button>
					</span>
				</div>
			</div>
		</div>
	</div>
	<div class="sp__"></div>
	<div id="iCenter" style="height: 600px; width: 98%; margin-left: 1%"></div>
</body>
</html>